<template>
	<view class="item">
		<!-- <image :src="HOSTURL+item.user_head" style="width: 35%;height: 100%;border-radius: 20rpx;"></image> -->
		<view class="avatar" @click="userinfo">
			<image v-if="!isvip && currenttab==2" class="blur" :src="HOSTURL+item.user_head" mode="aspectFill" ></image>
			<image v-if="isvip || currenttab!=2" :src="HOSTURL+item.user_head 	" mode="aspectFill" ></image>
			
			<view class="picnum"><text>{{item.imgcount || 0}}</text></view>
		</view>
		<view style="height: 100%;width: 100%;margin-left: 5%;">
			<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;align-items: center;color: #fff;font-size: 30rpx;height: 60rpx;">
					<view>{{item.user_name}}</view>
					<view v-if="item.is_identity_authentication==2" class="biaoji" :style="false?'background: linear-gradient(to right, #d9a14e, #b57e2c);':'background: #313131;'">
						<image v-if="item.nvshen==1" src="../static/index/nvshen.png" style="width: 18rpx;height: 18rpx;"></image>
						<image v-else src="../static/index/zhenren.png" style="width: 19rpx;height: 19rpx;"></image>
						<view style="margin-left: 5rpx;" :style="false?'color: #0F0D0F;':'color: #C99F51;'">{{item.nvshen==1?'女神':'真人'}}</view>
					</view>
				</view>
				<!-- <view v-if="false" class="zhanshi">最近活跃</view> -->
				<view v-if="item.is_online==1" class="zhanshi">
					<view style="width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #00FF00;margin-right: 10rpx;"></view>
					<view>在线</view>
				</view> 
				<view v-else class="zhanshi">
					<view>{{item.last_login_datetime}}</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view style="width: 100%;display: flex;align-items: center;font-size: 26rpx;">
				<view class="biaoqian">{{item.user_age}}岁</view>
				<view v-if="item.city!=''" class="biaoqian">{{item.city}}</view>
				<view v-if="item.occupation!='未设置'" class="biaoqian">{{item.occupation}}</view>
			</view>
			<view style="height: 20rpx;"></view> 
			<view style="width: 100%;display: flex;align-items: center;font-size: 26rpx;">
				<view class="biaoqian">
					<u-icon name="map-fill" color="#C5C3C3" size="20"></u-icon>
					<view style="margin-left: 5rpx;">{{item.user_distance}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "user-item",
		props: {
			item: {},
			isvip:"",
			currenttab:"",
		},
		data() {
			return {

				HOSTURL:this.$HOSTURL,
			};
		},
		methods:{
			userinfo(){
				if(this.$store.state.sex == this.item.user_sex){
					return uni.showToast({
						title:'不可查看同性的详细信息',
						icon:'none'
					})
				}
				if(this.currenttab==2 && !this.isvip){
					    console.log("开通会员")
						uni.showModal({
							title:'提示',
							content: "开通会员可以查看",
							success(res){
								if(res.confirm){
									console.log("开通会员")
									uni.navigateTo({
										url:"/pages/member/index"
									})
								}
							}
						})
				}else{
					
					uni.navigateTo({
						url:'/pages/userinfo/index?id='+this.item.user_id
					})
					console.log(this.item.user_id)
					console.log(22222222)
				}
				
				
				
				
				
			},
		}
	}
</script>

<style lang="scss">
	.item {
		// width: 100%;
		// height: 300rpx;
		display: flex;
		margin: 30rpx;
		.avatar {
					position: relative;
					width: 230rpx;
					height: 260rpx;
					background-color: #32313b;
					border-radius: 15rpx;
		
					image {
						width: 230rpx !important;
						height: 260rpx !important;
						border-radius: 15rpx !important;
						overflow: hidden !important;
						&.blur {
							filter: blur(8px);
						}
					}
		
					.picnum {
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
						font-size: 24rpx;
						color: #fff;
						background: url(/static/img.png);
						background-size: 83rpx 40rpx;
						background-repeat: no-repeat;
						width: 83rpx;
						line-height: 40rpx;
						height: 40rpx;
		
						text {
							padding-left: 45rpx;
						}
					}
				}
	}
	.zhanshi{
		// height: 60rpx;
		font-size: 26rpx;
		padding: 10rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.biaoji{
		font-size: 26rpx;
		// width: 85rpx;
		// height: 35rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.biaoqian{
		// width: 90rpx;
		// height: 35rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #555353;
		border-radius: 15rpx;
		margin-right: 10rpx;
		color: #C5C3C3;
	}
</style>
